<template>
    <div class="device-list">
        <div class="device-list-container flex-container">

            <div class="panel-list">
                <div class="item-panel">
                    <div class="row-content">
                        <div class="row-item">
                            <div class="title">医生:</div>
                            <div class="content">{{doctorInfo.name}}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="device-list-table">

                <el-table :data="goodsList" border>

                    <el-table-column label="ID" prop="id" width="60"></el-table-column>
                    <el-table-column label="姓名" prop="name" min-width="80"></el-table-column>
                    <el-table-column label="封面图">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover_img_url" alt="" class="thumb-img">
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间">
                        <template slot-scope="scope">
                            {{scope.row.create_time | timeFormat}}
                        </template>
                    </el-table-column>
                    <el-table-column label="销售单件利益">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.processMoney"
                                      @blur="inputBlur(scope.row.processMoney, scope.row.id)"></el-input>
                        </template>
                    </el-table-column>
                    <!--<el-table-column label="操作" fixed="right" width="200">-->
                    <!--<template slot-scope="scope">-->
                    <!--<el-button size="mini" type="primary outline"-->
                    <!--@click="toGoodsSharingPage(scope.row)">-->
                    <!--分成配置-->
                    <!--</el-button>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
            </div>

            <div class="flex-footer h-80">
                <div class="flex-footer-content">
                    <el-row>
                        <el-col :span="8" class="pt-6">
                            &nbsp;
                            <!--<el-button type="success" @click="handleAddUser">添加用户</el-button>-->
                        </el-col>
                        <el-col :span="16" class="text-right" v-if="total > 0">
                            <el-pagination
                                    @current-change="pageChange"
                                    :current-page="currentPage"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>


    </div>
</template>

<script type="text/ecmascript-6">

    import Core from 'core/core'

    export default {
        data() {
            return {
                editModalVisible: false,
                goodsList: [],

                doctorId: 0,
                doctorInfo: {},

                // 分页配置
                currentPage: 1,
                total: 0,
                pageSize: 10,
            }
        },
        mounted: function () {
            this.doctorId = this.$route.query.doctor_id || 0;

            this._doctorInfo();
            this._goodsListAll();
        },

        methods: {
            _doctorInfo() {
                Core.Api.User.info(this.doctorId)
                    .then(res => {
                        this.doctorInfo = res.user;
                    })
            },
            _goodsListAll() {
                Core.Api.Goods.listAll(this.doctorId)
                    .then(res => {
                    	let list = res.list;
						list.forEach(v => {
							v.processMoney = v.money / 100;
                        })
                        this.goodsList = list;
                    })
                    .catch(err => {
                    })
            },

            pageChange(val) {
                this.currentPage = val;
                this._goodsList();
            },


            showAssignModal(user) {
                this.userForm.userId = user.id;
                if (user.user_track) {
                    this.userForm.sp = user.user_track.hospital_id;
                    this.userForm.doctorId = user.user_track.doctor_id;
                }
                this.editModalVisible = true;
            },

            handleModalClose() {
                this.userForm = {
                    doctorId: "",
                    userId: 0
                };
            },
            handleSpChange() {
                this._doctorList();
            },

            handleTrackRemove(item) {
                this.$confirm('确认移除该医生?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return Core.Api.Dealer.trackRemove(item.id)
                })
                    .then(res => {
                        this._goodsList();
                    })
                    .catch(() => {

                    });
            },

            inputBlur(money, goodsId) {
                Core.Api.Goods.goodsSharingSave(
                    this.doctorId,
                    goodsId,
                    money * 100
                ).then(res => {

                })
            }

        }
    }
</script>

<style scoped lang="scss">
    .device-list {
        height: 100%;

        .device-list-container {
            padding-top: 10px;
            height: 100%;

            .search-row {
                margin: 0;
                padding: 15px 30px;
                background: #fff;

                .el-form--inline .el-form-item {
                    margin-bottom: 0;
                }

                .el-form-item__label {
                    padding-right: 10px;
                    font-size: 12px;
                }

                .el-form-item__content {
                    .el-input {
                        width: 175px;
                    }
                }
            }

            .device-list-table {
                padding: 20px 0;
                background: #ffffff;
                position: relative;
                flex: 1;
                overflow: auto;

                .all-select-holder {
                    line-height: 30px;
                    position: absolute;
                    left: 10px;
                    z-index: 10;
                }
            }

            .flex-footer {
                border-top: 1px solid #E0E7EF;
            }

            .flex-footer.h-80 {
                height: 80px;
            }

        }

        a.success {
            display: inline-block;
            color: #fff;
            background-color: #03CC75;
            border-color: #03CC75;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 7px 16px;
            font-size: 12px;
            border-radius: 4px;
            margin: 0 10px;
        }

        .upload-device {
            display: inline-block;
        }

        .panel-list {
            background: #fff;

            .item-panel {
                .tab-content {
                    padding: 0 20px;
                }

                &:first-child {
                    .row-title {
                        border-top: none;
                    }
                }

                .row-title {
                    height: 50px;
                    padding: 0 30px;
                    overflow: hidden;
                    border-top: 1px solid rgb(240, 240, 246);

                    .title {
                        font-size: 14px;
                        line-height: 50px;
                        color: #03CC75;
                        font-weight: bold;
                    }
                }

                .row-content {
                    overflow: hidden;
                    background: #FBFBFC;

                    .row-item {
                        width: 50%;
                        float: left;
                        height: 40px;
                        padding-left: 30px;
                        line-height: 40px;
                        border-top: 1px solid rgb(240, 240, 246);

                        &:nth-child(2n) {
                            border-left: 1px solid rgb(240, 240, 246);
                        }

                        .title {
                            font-weight: bold;
                            font-size: 12px;
                            color: #A9A9B1;
                            float: left;
                            width: 155px;
                        }

                        .content {
                            font-size: 12px;
                            color: #4D4D4D;
                            font-weight: bold;
                            float: left;
                        }

                        .action {
                            float: right;
                            width: 50px;
                            height: 50px;
                        }
                    }
                }
            }
        }
    }
</style>
